<script setup>
import { reactive, ref } from "vue";
import { Button } from "ant-design-vue";
import ArticleCard from "./ArticleCard.vue";

const list = reactive({
  data: [
    {
      title: "Ant Design Title 1",
    },
    {
      title: "Ant Design Title 2",
    },
    {
      title: "Ant Design Title 3",
    },
    {
      title: "Ant Design Title 4",
    },
  ],
});
</script>

<template>
  <a-list item-layout="vertical" :data-source="list.data">
    <template #renderItem="{ item }">
      <a-list-item>
        <ArticleCard></ArticleCard>
      </a-list-item>
    </template>
  </a-list>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
